<template>
  <div class="app-container bg-gray">
    <el-card class="box-1">
      <div slot="header">
        <span>创建考试</span>
      </div>
      <el-form ref="form" :model="form" :rules="formRules" label-width="160px">
        <el-form-item label="考试标题">
          <el-input v-model="form.name"/>
        </el-form-item>
        <el-form-item label="选择试卷">
          <el-select v-model="form.testId" placeholder="选择试卷" class="select" clearable @change="bindSelectChange">
            <el-option v-for="item in examPaperList" :key="item.id" :value="item['id']" :label="item['name']"/>
          </el-select>
        </el-form-item>
        <el-form-item label="考试时间">
          <el-date-picker
            v-model="form['time']"
            type="datetimerange"
            is-range
            clearable
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm"/>
        </el-form-item>
        <el-form-item label="合格分数">
          <el-input-number v-model="form.qualifiedScore" :max="form.totalScore"/><label style="color: red;margin-left: 20px;">当前试卷总分{{ form.totalScore }}</label>
        </el-form-item>
        <el-form-item label="封面">
          <ws-upload-single-img v-model="form['cover']" :path="form['cover']"/>
          <div class="remark">*注:为保证显示效果,请上传一张210px*210px的图片,支持.png, .jpg, .gif格式</div>
        </el-form-item>
        <el-form-item label="考试说明">
          <ws-editor v-model="form['explain']"/>
        </el-form-item>
        <el-form-item label="答题时长">
          <el-input-number v-model="form.limitTime"/>
        </el-form-item>
        <el-form-item label="考试次数">
          <el-input-number v-model="form.number"/>
        </el-form-item>
        <el-form-item label="考试对象">
          <div>
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAllTeam" @change="handleCheckAllChange">
              <b>所有人</b>
            </el-checkbox>
          </div>
          <el-checkbox :indeterminate="isAdminIndeterminate" v-model="checkAllAdminTeam" @change="handleCheckAllAdminChange">
            <b>员工分组</b>
          </el-checkbox>
          <el-checkbox-group v-model="checkedAdminTeam" @change="handleCheckedAdminChange">
            <el-checkbox v-for="team in teamList['admin']" :label="team" :key="team['id']">{{ team['name'] }}</el-checkbox>
          </el-checkbox-group>
          <el-checkbox :indeterminate="isMemberIndeterminate" v-model="checkAllMemberTeam" @change="handleCheckAllMemberChange">
            <b>客户分组</b>
          </el-checkbox>
          <el-checkbox-group v-model="checkedMemberTeam" @change="handleCheckedMemberChange">
            <el-checkbox v-for="team in teamList['member']" :label="team" :key="team['id']">{{ team['name'] }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="考试排名">
          <el-radio-group v-model="form.isRanking">
            <el-radio :label="1">显示</el-radio>
            <el-radio :label="0">不显示</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="考试规则">
          <el-checkbox-group v-model="form.rule" class="checkbox">
            <!--<el-checkbox :label="1">控制切屏次数, 允许切屏  <el-input-number v-model="form.cuttingScreenNumber" size="mini"/>  次,超过则自动交卷.</el-checkbox>-->
            <el-checkbox :label="2">题目乱序, 每个人题目顺序不同.</el-checkbox>
            <el-checkbox :label="3">不允许从别处复制内容粘贴到题目中做答.</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="通知方式">
          <el-radio-group v-model="form['notice']">
            <el-radio :label="1">短信</el-radio>
            <el-radio :label="2">微信</el-radio>
            <el-radio :label="3">短信&微信</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="success" class="bg-green btn" @click="submitForm('form')">创建</el-button>
          <el-button type="info" class="btn" @click="$router.back(-1)">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      examPaperList: [], // 试卷列表
      teamList: {
        admin: [],
        member: []
      }, // 分组

      isCheckAllPerson: false,
      checkAllTeam: false,
      checkAllAdminTeam: false,
      checkAllMemberTeam: false,
      checkedAdminTeam: [],
      checkedMemberTeam: [],
      adminTeamList: [],
      memberTeamList: [],
      isIndeterminate: false,
      isAdminIndeterminate: false,
      isMemberIndeterminate: false,

      form: {
        name: '',
        testId: '',
        time: [],
        cover: '',
        qualifiedScore: '',
        totalScore: 0,
        limitTime: '',
        number: 1,
        examineeId: [],
        // 是否排名
        isRanking: true,
        // 是否可以切屏
        cuttingScreen: 0,
        // 可切屏次数
        cuttingScreenNumber: 0,
        // 是否可以粘贴
        isCopy: 0,
        // 是否打乱顺序
        isSort: 0,
        explain: '',
        notice: [],
        rule: []
      },
      formRules: {
        name: [{ required: true, message: '请输入考试名称', trigger: 'change' }]
      }
    }
  },
  watch: {},
  created() {
    this.id = this.$route.query.id
    this.getExamPaperList();
    this.getTeamList();
  },
  methods: {
    handleCheckAllChange(val) {
      // console.log(val);
      this.checkedAdminTeam = val ? this.adminTeamList : [];
      this.isAdminIndeterminate = false;
      this.checkAllAdminTeam = val;
      this.checkedMemberTeam = val ? this.memberTeamList : [];
      this.isMemberIndeterminate = false;
      this.checkAllMemberTeam = val;
      this.isIndeterminate = false;
    },
    handleCheckAllAdminChange(val) {
      // console.log(val);
      this.checkedAdminTeam = val ? this.adminTeamList : [];
      this.isAdminIndeterminate = false;
      // console.log(this.checkedAdminTeam, this.isAdminIndeterminate);
    },
    handleCheckAllMemberChange(val) {
      this.checkedMemberTeam = val ? this.memberTeamList : [];
      this.isMemberIndeterminate = false;
    },
    handleCheckedMemberChange(value) {
      const checkedCount = value.length;
      this.checkAllMemberTeam = (checkedCount === this.memberTeamList.length);
      (checkedCount !== this.memberTeamList.length) && (this.checkAllTeam = false);
      this.isMemberIndeterminate = checkedCount > 0 && checkedCount < this.memberTeamList.length;
    },
    handleCheckedAdminChange(value) {
      // console.log(value)
      const checkedCount = value.length;
      this.checkAllAdminTeam = (checkedCount === this.adminTeamList.length);
      (checkedCount !== this.adminTeamList.length) && (this.checkAllTeam = false);
      this.isAdminIndeterminate = checkedCount > 0 && checkedCount < this.adminTeamList.length;
      // console.log(this.checkAllAdminTeam, this.isAdminIndeterminate);
    },

    /**
     *  获取试卷列表
     *  接口:'user/all-list'
     */
    getExamPaperList() {
      const url = 'exam/testPaperNoPage'
      this.$store.dispatch('GetConnect', { url }).then(res => {
        this.examPaperList = res.data;
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员');
      })
    },

    // 试卷选择
    bindSelectChange(e){
      for (let i = 0; i < this.examPaperList.length; i++) {
        if (this.examPaperList[i]['id'] === e) {
          this.form.totalScore = this.examPaperList[i]['fraction'];
        }
      }
    },

    // 获取分组列表
    getTeamList() {
      const url = 'exam/examineeGroupList'
      this.$store.dispatch('GetConnect', { url }).then(res => {
        this.teamList = res.data;
        this.adminTeamList = res.data['admin'];
        this.memberTeamList = res.data['member'];
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员');
      })
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const data = Object.assign({}, this.form);
          data.startTime = data.time[0];
          data.endTime = data.time[1];
          for (let i = 0; i < data.rule.length; i++) {
            if (data['rule'][i] === 1) {
              data.cuttingScreen = 1;
            } else if (data['rule'][i] === 2) {
              data.isSort = 1;
            } else if (data['rule'][i] === 3) {
              data.isCopy = 1;
            }
          }
          if (this.checkAllTeam) {
            data.examineeId = [{id: 0}];
          } else if (this.isCheckAllPerson) {
            data.examineeId = [this.teamList['all'][0]];
          } else {
            data.examineeId = this.checkedAdminTeam.concat(this.checkedMemberTeam);
          }
          const temp = [];
          for (let i = 0; i < data.examineeId.length; i++) {
            temp.push(data.examineeId[i]['id']);
          }
          data.examineeId = temp.join(',');

          // data.notice = data.notice.join(',');
          const url = 'exam/addExamData';
          this.$store.dispatch('GetConnect', { url, data }).then(res => {
            this.$message.success(res.msg);
            this.$router.back(-1);
          }).catch((err) => {
            this.$message.error(err.msg);
          })
        } else {
          this.$message.error('提交失败,请检查必填项');
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
  @import '../../../../styles/index.scss';

  .box-1 {
    max-width: 1000px;
    margin: 0 auto;

    > div span {
      font-size: 18px;
      font-weight: 600;
      padding: 0 10px;
    }

    .el-form {
      max-width: 900px;

      .title {
        font-weight: 600;
      }

      .remark {
        font-size: 13px;
        color: $textGray;
      }
      .checkbox{
        display: flex;
        flex-direction: column;
      }
    }
  }

  .btn {
    width: 20%;
    min-width: 160px;
  }

  .temple-download{
    margin-top: 20px;
  }

  .el-checkbox {
    margin-right: 30px;
  }

  .el-checkbox + .el-checkbox {
    margin-left: 0;
    margin-right: 30px;
  }
</style>
